<!doctype html>
<html>

<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

	<title>UTSEUS MetisLab</title>

	<link rel="stylesheet" href="dist/reset.css">
	<link rel="stylesheet" href="css/latex.css">
	<link rel="stylesheet" href="dist/reveal.css">
	<link rel="stylesheet" href="dist/theme/black.css">
	<link rel="stylesheet" href="css/fontawesome-free-6.4.0-web/css/all.min.css" crossorigin="anonymous"
		referrerpolicy="no-referrer" />

	<!-- Theme used for syntax highlighted code -->
	<link rel="stylesheet" href="plugin/highlight/monokai.css">

	<link rel="stylesheet" href="css/cdn.jsdelivr.net_npm_bootstrap-icons@1.10.3_font_bootstrap-icons.css">
	<script src="js/code.iconify.design_iconify-icon_1.0.2_iconify-icon.min.js"></script>

	<link rel="icon" href="img/Androidpirate.png" type="image/x-icon">


	<!-- https://stackoverflow.com/questions/47057398/reveal-js-title-with-capitalized-words-but-not-in-uppercase -->
	<style>
		.reveal h1,
		.reveal h2,
		.reveal h3,
		.reveal h4,
		.reveal h5 {
			text-transform: none;
		}
	</style>
	<style type="text/css">
		p {
			text-align: left;
		}
	</style>

</head>

<body>
	<div class="reveal">
		<div class="slides">
			<section data-auto-animate style="height: 600px">
				<h2 data-id="title" style="opacity: 1">UTSEUS & MetisLab</h2>
				<h3 data-id="h3">An introduction</h3>
				<div data-id="1"
					style="background: cyan; position: absolute; bottom: 190px; left: 16%; width: 60px; height: 60px;">
				</div>
				<div data-id="2"
					style="background: magenta; position: absolute; bottom: 190px; left: 36%; width: 60px; height: 60px;">
				</div>
				<div data-id="3"
					style="background: rgb(27, 135, 81); position: absolute; bottom: 190px; left: 56%; width: 60px; height: 60px;">
				</div>
				<div data-id="4"
					style="background: red; position: absolute; bottom: 190px; left: 76%; width: 60px; height: 60px;">
				</div>
			</section>

			<section data-auto-animate style="height: 600px">
				<h2 data-id="title" style="opacity: 0.7">UTSEUS & MetisLab</h2>
				<h3 data-id="h3">Shanghai matters</h3>
				<div data-id="1"
					style="background: cyan; position: absolute; bottom: 190px; left: 16%; width: 160px; height: 160px;">
					<p style="font-size: 24px;  text-align: center;">Geographical Significance as the Gateway to China
					</p>
				</div>
				<div data-id="2"
					style="background: magenta; position: absolute; bottom: 190px; left: 36%; width: 60px; height: 60px;">
				</div>
				<div data-id="3"
					style="background: rgb(27, 135, 81); position: absolute; bottom: 190px; left: 56%; width: 60px; height: 60px;">
				</div>
				<div data-id="4"
					style="background: red; position: absolute; bottom: 190px; left: 76%; width: 60px; height: 60px;">
				</div>
			</section>

			<section data-auto-animate style="height: 600px">
				<h2 data-id="title" style="opacity: 0.7">UTSEUS & MetisLab</h2>
				<h3 data-id="h3">Shanghai matters</h3>
				<div data-id="1"
					style="background: cyan; position: absolute; bottom: 190px; left: 16%; width: 160px; height: 160px;">
					<p style="font-size: 24px;  text-align: center;">Geographical Significance as the Gateway to China
					</p>
				</div>
				<div data-id="2"
					style="background: magenta; position: absolute; bottom: 190px; left: 36%; width: 160px; height: 160px;">
					<p style="font-size: 20px;  text-align: center;">Significant influence of French culture and
						extensive collaboration</p>
				</div>
				<div data-id="3"
					style="background: rgb(27, 135, 81); position: absolute; bottom: 190px; left: 56%; width: 60px; height: 60px;">
				</div>
				<div data-id="4"
					style="background: red; position: absolute; bottom: 190px; left: 76%; width: 60px; height: 60px;">
				</div>
			</section>

			<section data-auto-animate style="height: 600px">
				<h2 data-id="title" style="opacity: 0.7">UTSEUS & MetisLab</h2>
				<h3 data-id="h3">Shanghai matters</h3>
				<div data-id="1"
					style="background: cyan; position: absolute; bottom: 190px; left: 16%; width: 160px; height: 160px;">
					<p style="font-size: 24px;  text-align: center;">Geographical Significance as the Gateway to China
					</p>
				</div>
				<div data-id="2"
					style="background: magenta; position: absolute; bottom: 190px; left: 36%; width: 160px; height: 160px;">
					<p style="font-size: 20px;  text-align: center;">Significant influence of French culture and
						extensive
						collaboration</p>
				</div>
				<div data-id="3"
					style="background: rgb(27, 135, 81); position: absolute; bottom: 190px; left: 56%; width: 160px; height: 160px;">
					<p style="font-size: 24px; text-align: center;">A partnership with the Lyon region since 2008</p>
				</div>
				<div data-id="4"
					style="background: red; position: absolute; bottom: 190px; left: 76%; width: 60px; height: 60px;">
				</div>
			</section>

			<section data-auto-animate style="height: 600px">
				<h2 data-id="title" style="opacity: 0.7">UTSEUS & MetisLab</h2>
				<h3 data-id="h3">Shanghai matters</h3>
				<div data-id="1"
					style="background: cyan; position: absolute; bottom: 190px; left: 16%; width: 160px; height: 160px;">
					<p style="font-size: 24px;  text-align: center;">Geographical Significance as the Gateway to China
					</p>
				</div>
				<div data-id="2"
					style="background: magenta; position: absolute; bottom: 190px; left: 36%; width: 160px; height: 160px;">
					<p style="font-size: 20px;  text-align: center;">Significant influence of French culture and
						extensive
						collaboration</p>
				</div>
				<div data-id="3"
					style="background: rgb(27, 135, 81); position: absolute; bottom: 190px; left: 56%; width: 160px; height: 160px;">
					<p style="font-size: 24px; text-align: center;">A partnership with the Lyon region since 2008</p>
				</div>
				<div data-id="4"
					style="background: red; position: absolute; bottom: 190px; left: 76%; width: 160px; height: 160px;">
					<p style="font-size: 27px; text-align: center;">Educational and academic ties</p>
				</div>
			</section>

			<section data-auto-animate style="height: 600px">
				<h2 data-id="title" style="opacity: 1">UTSEUS & Shanghai University</h2>
				<div data-id="1"
					style="background: cyan; position: absolute; top: 50%; left: 50%; width: 400px; height: 400px; margin: -200px 0 0 -200px; border-radius: 400px;">

				</div>
				<div data-id="2"
					style="background: magenta; position: absolute; top: 50%; left: 50%; width: 300px; height: 300px; margin: -150px 0 0 -150px; border-radius: 400px;">
				</div>
				<div data-id="3"
					style="background: rgb(27, 135, 81); position: absolute; top: 50%; left: 50%; width: 200px; height: 200px; margin: -100px 0 0 -100px; border-radius: 400px;">
				</div>
				<div data-id="4"
					style="background: red; position: absolute; top: 50%; left: 50%; width: 100px; height: 100px; margin: -50px 0 0 -50px; border-radius: 400px;">
					<p style="font-size: 18px; text-align: center; ">Shanghai Univ.<br>UTSEUS</p>
				</div>
			</section>

			<section data-auto-animate style="height: 600px">
				<h2 data-id="title" style="opacity: 1">UTSEUS & Shanghai University</h2>

				<h3 style="opacity: 1; font-size: 35px;">Largest Sino-French institut in China</h3>
				<img src="img/uts.png" width="350" height="200">
				<div data-id="1"
					style="background: cyan; position: absolute; bottom: 0px; left: 16%; width: 60px; height: 60px;">
				</div>
			</section>

			<section data-auto-animate style="height: 600px">
				<h2 data-id="title" style="opacity: 1">UTSEUS & Shanghai University</h2>

				<h3 style="opacity: 1; font-size: 35px;">Largest Sino-French institute in China</h3>
				<h3 style="opacity: 1; font-size: 35px;">Training of 270 French-Speaking Students Annually</h3>

				<img src="img/uts5.png" width="350" height="200">
				<div data-id="1"
					style="background: cyan; position: absolute; bottom: 0px; left: 16%; width: 60px; height: 60px;">
				</div>
				<div data-id="2"
					style="background: magenta; position: absolute; bottom: 0px; left: 36%; width: 60px; height: 60px;">
				</div>
			</section>

			<section data-auto-animate style="height: 600px">
				<h2 data-id="title" style="opacity: 1">UTSEUS & Shanghai University</h2>

				<h3 style="opacity: 1; font-size: 35px;">Largest Sino-French institute in China</h3>
				<h3 style="opacity: 1; font-size: 35px;">Training of 270 French-Speaking Students Annually</h3>
				<h3 style="opacity: 1; font-size: 35px;">Large-scale cross-student mobility </h3>

				<img src="img/uts2.png" width="350" height="200">
				<div data-id="1"
					style="background: cyan; position: absolute; bottom: 0px; left: 16%; width: 60px; height: 60px;">
				</div>
				<div data-id="2"
					style="background: magenta; position: absolute; bottom: 0px; left: 36%; width: 60px; height: 60px;">
				</div>
				<div data-id="3"
					style="background: rgb(27, 135, 81); position: absolute; bottom: 0px; left: 56%; width: 60px; height: 60px;">
				</div>
			</section>

			<section data-auto-animate style="height: 600px">
				<h2 data-id="title" style="opacity: 1">UTSEUS & Shanghai University</h2>

				<h3 style="opacity: 1; font-size: 35px;">Largest Sino-French institute in China</h3>
				<h3 style="opacity: 1; font-size: 35px;">Training of 270 French-Speaking Students Annually</h3>
				<h3 style="opacity: 1; font-size: 35px;">Large-scale cross-student mobility</h3>
				<h3 style="opacity: 1; font-size: 35px;">UTSEUS's Sino-French joint Ph.D. programs underway</h3>

				<img src="img/uts6.png" width="350" height="200">
				<div data-id="1"
					style="background: cyan; position: absolute; bottom: 0px; left: 16%; width: 60px; height: 60px;">
				</div>
				<div data-id="2"
					style="background: magenta; position: absolute; bottom: 0px; left: 36%; width: 60px; height: 60px;">
				</div>
				<div data-id="3"
					style="background: rgb(27, 135, 81); position: absolute; bottom: 0px; left: 56%; width: 60px; height: 60px;">
				</div>
				<div data-id="4"
					style="background: red; position: absolute; bottom: 0px; left: 76%; width: 60px; height: 60px;">
				</div>
			</section>


			<section data-auto-animate style="height: 600px">
				<h2 data-id="title" style="opacity: 1">UTSEUS matters</h2>
				<div data-id="1"
					style="background: cyan; position: absolute; top: 50%; left: 50%; width: 400px; height: 400px; margin: -200px 0 0 -200px; border-radius: 400px;">

				</div>
				<div data-id="2"
					style="background: magenta; position: absolute; top: 50%; left: 50%; width: 300px; height: 300px; margin: -150px 0 0 -150px; border-radius: 400px;">
				</div>
				<div data-id="3"
					style="background: rgb(27, 135, 81); position: absolute; top: 50%; left: 50%; width: 200px; height: 200px; margin: -100px 0 0 -100px; border-radius: 400px;">
				</div>
				<div data-id="4"
					style="background: red; position: absolute; top: 50%; left: 50%; width: 100px; height: 100px; margin: -50px 0 0 -50px; border-radius: 400px;">
					<p style="font-size: 18px; text-align: center; ">UTSEUS matters</p>
				</div>
			</section>



			<section data-auto-animate>
				<h2 data-id="title" style="opacity: 1">UTSEUS matters</h2>
				<h3 style="opacity: 1; font-size: 35px;"> Support of the Consulate General of France in Shanghai</h3>
				<img src="img/p01.png" width="300" height="200">
				<div data-id="1"
					style="background: cyan; position: absolute; bottom: 0px; left: 16%; width: 60px; height: 60px;">
				</div>
			</section>

			<section data-auto-animate>
				<h2 data-id="title" style="opacity: 1">UTSEUS matters</h2>
				<h3 style="opacity: 0.7; font-size: 35px;">Support of the Consulate General of France in Shanghai</h3>
				<h3 style="opacity: 1; font-size: 35px;">Visit of CNRS China office director, Philippe Arnaud</h3>
				<img src="img/pcnrs.png" width="450" height="200">
				<div data-id="1"
					style="background: cyan; position: absolute; bottom: 0px; left: 16%; width: 60px; height: 60px;">
				</div>
				<div data-id="2"
					style="background: magenta; position: absolute; bottom: 0px; left: 36%; width: 60px; height: 60px;">
				</div>
			</section>

			<section data-auto-animate>
				<h2 data-id="title" style="opacity: 1">UTSEUS matters</h2>
				<h3 style="opacity: 0.7; font-size: 35px;">Support of the Consulate General of France in Shanghai</h3>
				<h3 style="opacity: 0.7; font-size: 35px;">Visit of CNRS China office director, Philippe Arnaud</h3>
				<h3 style="opacity: 0.7; font-size: 35px;">Visit of President of INSERM, Didier Samuel</h3>
				<h3 style="opacity: 1; font-size: 35px;">Visit of Minister of Higher Education of France, Frédérique
					Vidal</h3>
				<img src="img/p0v.png" width="300" height="200">
				<div data-id="1"
					style="background: cyan; position: absolute; bottom: 0px; left: 16%; width: 60px; height: 60px;">
				</div>
				<div data-id="2"
					style="background: magenta; position: absolute; bottom: 0px; left: 36%; width: 60px; height: 60px;">
				</div>
				<div data-id="3"
					style="background: rgb(27, 135, 81); position: absolute; bottom: 0px; left: 56%; width: 60px; height: 60px;">
				</div>
				<div data-id="4"
					style="background: red; position: absolute; bottom: 0px; left: 76%; width: 60px; height: 60px;">
				</div>
			</section>


			<section data-auto-animate style="height: 600px">
				<h2 data-id="title" style="opacity: 1">UTSEUS & MetisLab</h2>
				<div data-id="1"
					style="background: cyan; position: absolute; top: 50%; left: 50%; width: 400px; height: 400px; margin: -200px 0 0 -200px; border-radius: 400px;">

				</div>
				<div data-id="2"
					style="background: magenta; position: absolute; top: 50%; left: 50%; width: 300px; height: 300px; margin: -150px 0 0 -150px; border-radius: 400px;">
				</div>
				<div data-id="3"
					style="background: rgb(27, 135, 81); position: absolute; top: 50%; left: 50%; width: 200px; height: 200px; margin: -100px 0 0 -100px; border-radius: 400px;">
				</div>
				<div data-id="4"
					style="background: red; position: absolute; top: 50%; left: 50%; width: 100px; height: 100px; margin: -50px 0 0 -50px; border-radius: 400px;">
					<p style="font-size: 18px; text-align: center; ">UTSEUS & MetisLab</p>
				</div>
			</section>

			<section data-auto-animate>
				<h2 data-id="title" style="opacity: 1">UTSEUS & MetisLab</h2>
				<h3 style="opacity: 1; font-size: 35px;">Professor Wanyu Liu, Director of UTSEUS</h3>
				<h3 style="opacity: 1; font-size: 25px;">Founder & Chinese Director of MetisLab</h3>
				<img src="img/pl2.png" width="300" height="200">
				<div data-id="1"
					style="background: cyan; position: absolute; bottom: 0px; left: 16%; width: 60px; height: 60px;">
				</div>
				<div data-id="2"
					style="background: magenta; position: absolute; bottom: 0px; left: 36%; width: 60px; height: 60px;">
				</div>
			</section>

			<section data-auto-animate>
				<h2 data-id="title" style="opacity: 1">UTSEUS & MetisLab</h2>
				<h3 style="opacity: 0.7; font-size: 35px;">Professor Wanyu Liu, Director of UTSEUS</h3>
				<h3 style="opacity: 0.7; font-size: 25px;">Founder & Chinese Director of MetisLab</h3>
				<h3 style="opacity: 1; font-size: 25px;">30 years of collaboration with CREATIS/INSA Lyon</h3>
				<h3 style="opacity: 1; font-size: 25px;">Have trained about 20 Ph.D within the framework of MetisLab
				</h3>
				<img src="img/pl3.png" width="300" height="200">
				<div data-id="1"
					style="background: cyan; position: absolute; bottom: 0px; left: 16%; width: 60px; height: 60px;">
				</div>
				<div data-id="2"
					style="background: magenta; position: absolute; bottom: 0px; left: 36%; width: 60px; height: 60px;">
				</div>
				<div data-id="3"
					style="background: rgb(27, 135, 81); position: absolute; bottom: 0px; left: 56%; width: 60px; height: 60px;">
				</div>
			</section>

			<section data-auto-animate>
				<h2 data-id="title" style="opacity: 1">UTSEUS & MetisLab</h2>
				<h3 style="opacity: 0.7; font-size: 35px;">Professor Wanyu Liu, Director of UTSEUS</h3>
				<h3 style="opacity: 0.7; font-size: 25px;">Founder & Chinese Director of MetisLab</h3>
				<h3 style="opacity: 0.7; font-size: 25px;">30 years of collaboration with CREATIS/INSA Lyon</h3>
				<h3 style="opacity: 0.7; font-size: 25px;">Have trained about 20 Ph.D within the framework of MetisLab
				</h3>
				<h3 style="opacity: 1; font-size: 25px;">Ordre des Palmes Académiques in 2023</h3>
				<img src="img/pzonglv.png" width="300" height="200">
				<div data-id="1"
					style="background: cyan; position: absolute; bottom: 0px; left: 16%; width: 60px; height: 60px;">
				</div>
				<div data-id="2"
					style="background: magenta; position: absolute; bottom: 0px; left: 36%; width: 60px; height: 60px;">
				</div>
				<div data-id="3"
					style="background: rgb(27, 135, 81); position: absolute; bottom: 0px; left: 56%; width: 60px; height: 60px;">
				</div>
				<div data-id="4"
					style="background: red; position: absolute; bottom: 0px; left: 76%; width: 60px; height: 60px;">
				</div>
			</section>



			<section data-auto-animate style="height: 600px">
				<h2 data-id="title" style="opacity: 1">UT Group & MetisLab</h2>
				<div data-id="1"
					style="background: cyan; position: absolute; top: 50%; left: 50%; width: 400px; height: 400px; margin: -200px 0 0 -200px; border-radius: 400px;">

				</div>
				<div data-id="2"
					style="background: magenta; position: absolute; top: 50%; left: 50%; width: 300px; height: 300px; margin: -150px 0 0 -150px; border-radius: 400px;">
				</div>
				<div data-id="3"
					style="background: rgb(27, 135, 81); position: absolute; top: 50%; left: 50%; width: 200px; height: 200px; margin: -100px 0 0 -100px; border-radius: 400px;">
				</div>
				<div data-id="4"
					style="background: red; position: absolute; top: 50%; left: 50%; width: 100px; height: 100px; margin: -50px 0 0 -50px; border-radius: 400px;">
					<p style="font-size: 18px; text-align: center; ">UT Group & MetisLab</p>
				</div>
			</section>

			<section data-auto-animate>
				<h2 data-id="title" style="opacity: 1">UTSEUS & MetisLab & UT Group</h2>
				<h3 style="opacity: 1; font-size: 35px;"> UTT/UTC/UTBM as potential partners of MetisLab</h3>
				<img src="img/put.png" width="500" height="200">
				<div data-id="1"
					style="background: cyan; position: absolute; bottom: 0px; left: 16%; width: 60px; height: 60px;">
				</div>
			</section>

			<section data-auto-animate>
				<h2 data-id="title" style="opacity: 1">UTSEUS & MetisLab & UT Group</h2>
				<h3 style="opacity: 1; font-size: 35px;"> UTT/UTC/UTBM as potential partners of MetisLab</h3>
				<h3 style="opacity: 1; font-size: 35px;"> High-quality engineers training and cutting-edge research
				</h3>
				<img src="img/put.png" width="500" height="200">
				<div data-id="1"
					style="background: cyan; position: absolute; bottom: 0px; left: 16%; width: 60px; height: 60px;">
				</div>
				<div data-id="2"
					style="background: magenta; position: absolute; bottom: 0px; left: 36%; width: 60px; height: 60px;">
				</div>
			</section>

			<section data-auto-animate>
				<h2 data-id="title" style="opacity: 1">UTSEUS & MetisLab & UT Group</h2>
				<h3 style="opacity: 1; font-size: 35px;"> UTT/UTC/UTBM as potential partners of MetisLab</h3>
				<h3 style="opacity: 1; font-size: 35px;"> High-quality engineers training and cutting-edge research
				</h3>
				<h3 style="opacity: 1; font-size: 35px;"> A large and highly regarded alumni network</h3>
				<img src="img/put.png" width="500" height="200">
				<div data-id="1"
					style="background: cyan; position: absolute; bottom: 0px; left: 16%; width: 60px; height: 60px;">
				</div>
				<div data-id="2"
					style="background: magenta; position: absolute; bottom: 0px; left: 36%; width: 60px; height: 60px;">
				</div>
				<div data-id="3"
					style="background: rgb(27, 135, 81); position: absolute; bottom: 0px; left: 56%; width: 60px; height: 60px;">
				</div>
			</section>


			<section data-auto-animate>
				<h2 data-id="title" style="opacity: 1">UTSEUS & MetisLab & UT Group</h2>
				<h3 style="opacity: 1; font-size: 35px;"> UTT/UTC/UTBM as potential partners of MetisLab</h3>
				<h3 style="opacity: 1; font-size: 35px;"> High-quality engineers training and cutting-edge research
				</h3>
				<h3 style="opacity: 1; font-size: 35px;"> A large and highly regarded alumni network</h3>
				<h3 style="opacity: 1; font-size: 35px;"> Mathematics, Computer Science, Bio-engineering</h3>
				<img src="img/put.png" width="500" height="200">
				<div data-id="1"
					style="background: cyan; position: absolute; bottom: 0px; left: 16%; width: 60px; height: 60px;">
				</div>
				<div data-id="2"
					style="background: magenta; position: absolute; bottom: 0px; left: 36%; width: 60px; height: 60px;">
				</div>
				<div data-id="3"
					style="background: rgb(27, 135, 81); position: absolute; bottom: 0px; left: 56%; width: 60px; height: 60px;">
				</div>
				<div data-id="4"
					style="background: red; position: absolute; bottom: 0px; left: 76%; width: 60px; height: 60px;">
				</div>
			</section>

			<section data-auto-animate style="height: 600px">
				<h2 data-id="title" style="opacity: 1">Thank you!</h2>
				<div data-id="1"
					style="background: cyan; position: absolute; top: 50%; left: 50%; width: 400px; height: 400px; margin: -200px 0 0 -200px; border-radius: 400px;">

				</div>
				<div data-id="2"
					style="background: magenta; position: absolute; top: 50%; left: 50%; width: 300px; height: 300px; margin: -150px 0 0 -150px; border-radius: 400px;">
				</div>
				<div data-id="3"
					style="background: rgb(27, 135, 81); position: absolute; top: 50%; left: 50%; width: 200px; height: 200px; margin: -100px 0 0 -100px; border-radius: 400px;">
				</div>
				<div data-id="4"
					style="background: red; position: absolute; top: 50%; left: 50%; width: 100px; height: 100px; margin: -50px 0 0 -50px; border-radius: 400px;">
					<p style="font-size: 28px; text-align: center; ">Thank <br> you!</p>
				</div>

			</section>

		</div>
	</div>

	<script src="dist/reveal.js"></script>
	<script src="plugin/markdown/markdown.js"></script>
	<script src="plugin/title-footer/title-footer.js"></script>
	<script src="plugin/zoom/zoom.js"></script>
	<script>
		// More info about initialization & config:
		// - https://revealjs.com/initialization/
		// - https://revealjs.com/config/
		Reveal.initialize({
			hash: true,
			slideNumber: true,
			history: true,
			loop: false,
			embedded: false,
			mouseWheel: false,
			hideCursorTime: 3000,

			// Learn about plugins: https://revealjs.com/plugins/
			plugins: [RevealMarkdown, RevealZoom]
		});

		Reveal.configure({
			keyboard: {
				27: () => { console.log('esc') }, // do something custom when ESC is pressed
				13: 'next' // go to the next slide when the ENTER key is pressed
			}
		});

	</script>
</body>


</html>